<template>
  <div class="statistics-box">
    <div class="statistics-box-top">
      <h3>交易数据</h3>
      <div class="stat-top-lr">
        <div class="btn">
          <el-radio-group
            v-model="radio"
            @change="dasSel"
          >
            <el-radio-button label="上月" />
            <el-radio-button label="本月" />
          </el-radio-group>
        </div>
        <div class="block">
          <el-date-picker
            v-model="value"
            style="max-width:238px"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :unlink-panels="false"
            @change="selTime"
          />
        </div>
        <!-- <div
          class="exportBtn"
          @click="exportBtn"
        >导出数据</div> -->
      </div>
    </div>
    <div class="statistics-box-bot">
      <div class="stat-box-bot-lf">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="CheckUser"
            label="查看人数"
            align="center"
          />
          <el-table-column
            prop="OrderUserCount"
            label="下单人数"
            align="center"
          />
          <el-table-column
            prop="OrderFormCount"
            label="订单数"
            align="center"
          />
          <el-table-column
            prop="OrderCoinCount"
            label="订单金币"
            align="center"
          />
          <el-table-column
            prop="ValidOrderCount"
            label="有效订单数"
            align="center"
          />
          <el-table-column
            prop="PaySum"
            label="支付金额"
            align="center"
          />
        </el-table>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="NoPaySum"
            label="未付款金额"
            align="center"
          />
          <el-table-column
            prop="PayUserCount"
            label="付款人数"
            align="center"
          />
          <el-table-column
            prop="PayOrderCount"
            label="付款订单数"
            align="center"
          />
          <el-table-column
            prop="PayCoinCount"
            label="付款金币"
            align="center"
          />
          <el-table-column
            prop="PaymentMoney"
            label="付款金额"
            align="center"
          />
          <el-table-column
            prop="GuestAvePrice"
            align="center"
            label="客单价"
          />
        </el-table>
      </div>
      <div class="stat-box-bot-lr">
        <div class="circle-box">
          <el-progress
            :stroke-width="20"
            :width="width"
            type="circle"
            :show-text="false"
            :percentage="orderNum"
          />
          <div class="circle-text">{{ orderT }}</div>
          <span>下单转化率</span>
        </div>
        <div class="circle-box">
          <el-progress
            :stroke-width="20"
            :width="width"
            type="circle"
            :percentage="payNum"
            :show-text="false"
          />
          <div class="circle-text">{{ payT }}</div>
          <span>付款转化率</span>
        </div>
        <div class="circle-box">
          <el-progress
            :stroke-width="20"
            :width="width"
            type="circle"
            :percentage="successNum"
            :show-text="false"
          />
          <div class="circle-text">{{ successT }}</div>
          <span>成交转化率</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTableNum, getRateNum } from '@/api/statistics.js'
import { startYMD, endYMD, subStr } from '@/utils/util.js'
import { constants } from 'crypto'
export default {
  data() {
    return {
      value: [],
      radio: '上月',
      dropValue: '',
      orderNum: 0,
      payNum: 0,
      successNum: 0,
      tableData: [],
      orderT: '0%',
      payT: '0%',
      successT: '0%',
      width: 168,
      month: () => {
        return new Date().getMonth()
      }
    }
  },
  mounted() {
    // console.log(1111)
    const num = 168 / 1920
    this.width = num * document.body.clientWidth
    window.addEventListener('resize', () => {
      this.width = num * document.body.clientWidth
      // console.log(num * document.body.clientWidth)
      // console.log(document.body.clientWidth)
    })
  },
  created() {
    this.getTableList(startYMD(this.month()), endYMD(this.month()))
    this.getRateList(startYMD(this.month()), endYMD(this.month()))
  },
  methods: {
    // 获取列表数据接口
    getTableList(startM, endM) {
      getTableNum({
        startTime: startM,
        endTime: endM
      }).then(res => {
        // console.log(res.data);
        for (const k in res.data) {
          // console.log(res.data[k]);
          if (!res.data[k]) {
            res.data[k] = '/'
          }
        }
        // console.log(res.data);
        this.tableData = []
        this.tableData.push(res.data)
      })
    },
    // 获取转化率
    getRateList(startM, endM) {
      getRateNum({
        startTime: startM,
        endTime: endM
      }).then(res => {
        // console.log(res.data);
        this.payNum = subStr(res.data.PayConversion)
        this.payT = res.data.PayConversion
        if (this.payNum > 100) {
          this.payNum = 100
        }
        this.orderNum = subStr(res.data.UserOrderConversion)
        this.orderT = res.data.UserOrderConversion
        if (this.orderNum > 100) {
          this.orderNum = 100
        }
        this.successNum = subStr(res.data.SuccessConversion)
        this.successT = res.data.SuccessConversion
        if (this.successNum > 100) {
          this.successNum = 100
        }
      })
    },
    // 选择
    selTime() {
      this.getRateList(this.value[0], this.value[1])
      this.getTableList(this.value[0], this.value[1])
    },
    // 选择时间
    dasSel() {
      if (this.radio === '本月') {
        this.getRateList(startYMD((this.month() + 1)), endYMD((this.month() + 1)))
        this.getTableList(startYMD((this.month() + 1)), endYMD((this.month() + 1)))
      } else {
        this.getRateList(startYMD(this.month()), endYMD(this.month()))
        this.getTableList(startYMD(this.month()), endYMD(this.month()))
      }
    },
    // 导出数据
    exportBtn() {}
  }
}
</script>

